<!--
 * @Author: your name
 * @Date: 2021-01-13 14:23:26
 * @LastEditTime: 2021-02-03 17:25:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \longh_web\src\views\index\feedback\index.vue
-->
<!--  -->
<template>
  <div class="page-main">
    <div class="banner">
      <div class=" wh-1200">
        <p class="title">问题反馈</p>
        <p class="tips-title">感谢您使用企业供需精准对接服务，我们非常乐意倾听您的声音。</p>
      </div>
    </div>

    <div class=" form-page-main">
      <div class="wh-1200 form-content">
        <div class="form">
          <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="反馈类型" prop="type">
              <a-radio-group v-model="form.type">
                <a-radio :value="1">
                  遇到问题
                </a-radio>
                <a-radio :value="2">
                  使用建议
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="反馈内容" prop="content">
              <a-input v-model="form.content" type="textarea"  placeholder="请输入反馈内容" />
            </a-form-model-item>

            <a-form-model-item label="联系人" prop="linkMan">
              <a-input v-model="form.linkMan" placeholder="请输入联系人" />
            </a-form-model-item>
            <a-form-model-item label="联系方式" prop="link">
              <a-input v-model="form.link" placeholder="请输入联系方式" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button :disabled="IsDisable" type="primary" @click="onSubmit">
                提交反馈
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addfeedbackInfo } from "@/apis/feedback";
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        type: "",
        linkMan: "",
        link: "",
        content: "",
        status:'0',
      },
      IsDisable: false,
      rules: {
        type: [
          {
            required: true,
            message: "请选择反馈类型",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请填写反馈内容",
            trigger: "blur",
          },
        ],
        linkMan: [
          {
            required: true,
            message: "请填写联系人",
            trigger: "blur",
          },
        ],
        link: [
          {
            required: true,
            message: "请填写联系方式",
            trigger: "blur",
          },
          {
            pattern:  /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确'
            }
        ],
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //   alert("submit!");
          this.addfeedbackInfo();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    addfeedbackInfo() {
      this.IsDisable = true;
      addfeedbackInfo(this.form)
        .then((res) => {
          if (res.code == 200) {
            setTimeout(() => {
               this.resetForm(); 
            }, 200);
            this.IsDisable = false;
            this.$message.success("提交成功");
          } else {
            this.IsDisable = false;
             this.$message.error('提交失败');
          }
        })
        .catch((error) => {
            this.IsDisable = false;
            this.$message.warning('提交异常');
        });
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
.banner {
  width: 100%;
  height: 200px;
  background-image: url("./images/banner.png");
  background-repeat: no-repeat;
  background-size: 100% 200px;
  .title {
    font-size: 40px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #030e19;
    padding-top: 50px;
  }
  .tips-title {
    font-size: 16px;
    letter-spacing: 0px;
    color: #030e19;
    margin-top: 30px;
  }
}
.form-page-main {
  border-radius: 8px;
  background-color: #f5f7fa;
  .form-content {
    border-radius: 8px;
    padding-top: 30px;
    padding-bottom: 30px;
    .form {
      background-color: #ffffff;
      padding: 30px;
    }
  }
}
::v-deep .ant-form-item-control{
    textarea{
        min-height: 160px;
    }
}
</style>